html {
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
background: -webkit-radial-gradient(circle, #fff, #ccc);
background: -o-radial-gradient(circle, #fff, #ccc);
background: -moz-radial-gradient(circle, #fff, #ccc);
}
#container {
height: 400px;
width: 550px;
background-color: #cbd5e1;
margin: 100px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 0px 0px #ef4444;
position: relative;
}
#score {
border-radius: 20px;
background-color: #1e293b;
color: #e2e8f0;
padding: 11px;
position: absolute;
left: 500px;
box-shadow: 0px 4px 0px #1e293b;
}
#correct {
position: absolute;
left: 260px;
background-color: #42e252;
color: white;
padding: 11px;
display: none;
}
#wrong {
position: absolute;
left: 250px;
background-color: #de401a;
color: white;
padding: 11px;
display: none;
}
#question {
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #f9fafb;
box-shadow: 0px 4px #f9fafb;
-moz-box-shadow: 0px 4px #f9fafb;
-webkit-box-shadow: 0px 4px #f9fafb;
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction {
width: 450px;
height: 50px;
background-color: #ef4444;
margin: 10px auto;
text-align: center;
line-height: 45px;
box-shadow: 0px 4px #ef4444;
-moz-box-shadow: 0px 4px #ef4444;
-webkit-box-shadow: 0px 4px #ef4444;
}
#choices {
width: 450px;
height: 100px;
margin: 5px auto;
}
.box {
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.box:active,
#startreset:active {
background-color: #475569;
color: white;
box-shadow: 0px 0px #475569;
-moz-box-shadow: 0px 0px #475569;
-webkit-box-shadow: 0px 0px #475569;
top: 4px;
}
#box4 {
margin-right: 0;
}
#startreset {
width: 78px;
padding: 10px;
background-color: #ef4444;
margin: 0 auto;
border-radius: 3px;
cursor: pointer;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
#timeremaining {
width: 152px;
padding: 10px;
position: absolute;
top: 395px;
left: 400px;
background-color: rgba(181, 235, 36, 0.8);
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
/* visibility: hidden;*/
display: none;
}
#gameOver {
height: 200px;
width: 500px;
background: linear-gradient(#F3CA6B, #F3706C);
background: -webkit-linear-gradient(#F3CA6B, #F3706C);
background: -o-linear-gradient(#F3CA6B, #F3706C);
background: -moz-linear-gradient(#F3CA6B, #F3706C);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
z-index: 2;
display: none;
}